<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>拼图</title>
	<link   href="../static/css/puzzle.css"  rel="stylesheet" type="text/css">
	<script src="../static/js/start.js"     type="text/javascript"></script>       <!-- 选图界面 -->
	<script src="../static/js/challenge.js" type="text/javascript"></script>       <!-- 拼图界面 -->
	<script src="../static/js/end.js"       type="text/javascript"></script>       <!-- 成绩界面 -->
	<script type="text/javascript" src="../static/js/jquery-1.4.2.js"></script>    <!-- jquery   -->
	<link rel="shortcut icon" href="../img/favico.ico" type="image/x-icon">
    <script type="text/javascript">       
    	//window.onload()
    	//function judgeDif();  //判断游戏难度，并返回0/1/2
    	//function disrupttion();//打乱图片
    	//function show(i)      //切换界面

		window.onload=function(){
			var pics=document.getElementById("pics"); //启动界面上加载游戏图片
			for(var j=0;j<12;j++){
				var pic=document.createElement("img");
				pic.src="../img/"+j+".jpg";
				pic.setAttribute("class","pics");
				pic.setAttribute("id","pic"+j);
				pic.ondragstart=function(event){
					event.dataTransfer.setData("Text",event.target.id);
				};
				pics.appendChild(pic);
			}
		}//你懂的

		function judgeDif(){   //判断玩家选择的难度
			var i;//记录难度程度
			var difficulty=document.getElementsByName("difficulty");
			for(i=0;i<difficulty.length;i++)
				if(difficulty[i].checked)
					break;
			return i;
		}

		function disrupttion(){  //打乱图片
			var j=judgeDif();    //判断游戏难度
			if(j==0){  //easy难度
				document.getElementById("sa1").style.display="block";
				var divimg=new Array(4);
				var flag=[1,1,1,1];
				var position=["0px 0px","100% 0px", //background的不同位置
							"0px 100%","100% 100%"];
				for(var k=0;k<4;k++){
					divimg[k]=document.getElementById("sa1img"+k);
					divimg[k].style.background="url("+cdPicmodel.src+")";
					divimg[k].style.backgroundSize="400px 400px";
				}
				for(var k=0;k<4;k++){
					var count=parseInt(Math.random()*4);
					while(flag[count]!=1)
						count=parseInt(Math.random()*4);
					divimg[k].style.backgroundPosition=position[count];
					divimg[k].id="sa1img"+count;
					flag[count]=0;
					// divimg[k].style.webkitTransform="rotate("+90*parseInt(Math.random()*3)+"deg)";
				}
			}
			else if(j==1){ //medium难度
				document.getElementById("sa2").style.display="block";
				var divimg=new Array(6);
				var flag=[1,1,1,1,1,1];
				var position=["0px 0px","50% 0px","100% 0px",
							  "0px 100%","50% 100%","100% 100%"];
				for(var k=0;k<6;k++){
					divimg[k]=document.getElementById("sa2img"+k);
					divimg[k].style.background="url("+cdPicmodel.src+")";
					divimg[k].style.backgroundSize="400px 400px";
				}
				for(var k=0;k<6;k++){
					var count=parseInt(Math.random()*6);
					while(flag[count]!=1)
						count=parseInt(Math.random()*6);
					divimg[k].style.backgroundPosition=position[count];
					divimg[k].id="sa2img"+count;
					flag[count]=0;
				}
			}
			else{  //hard难度
				document.getElementById("sa3").style.display="block";
				var divimg=new Array(9);
				var flag=[1,1,1,1,1,1,1,1,1];
				var position=["0px 0px","50% 0px",
							"100% 0px","0px 50%","50% 50%","100% 50%",
							"0px 100%","50% 100%","100% 100%"];
				for(var k=0;k<9;k++){
					divimg[k]=document.getElementById("sa3img"+k);
					divimg[k].style.background="url("+cdPicmodel.src+")";
					divimg[k].style.backgroundSize="400px 400px";
				}
				for(var k=0;k<9;k++){
					var count=parseInt(Math.random()*9);
					while(flag[count]!=1)
						count=parseInt(Math.random()*9);
					divimg[k].style.backgroundPosition=position[count];
					divimg[k].id="sa3img"+count;
					flag[count]=0;
				}
			}
		}

		var easyIDs=new Array();  //保存所有easy玩家ID
		var mediumIDs=new Array();  //保存所有medium玩家ID
		var hardIDs=new Array();  //保存所有hard玩家ID

		function show(i){      //启动游戏（即start按钮）
			var start=document.getElementById("start");  //登陆界面
			var challenge=document.getElementById("challenge"); //游戏界面
			var end=document.getElementById("end");       //成绩界面
			var cartSurface=document.getElementById("cartSurface");   
			var cdPicmodel=document.getElementById("cdPicmodel");  //选择图片框内的隐藏图片
			var f=document.getElementById("f"); //登陆界面画布中的字
			var startArea=document.getElementById("startArea");	   //challenge左边框
			var aimArea=document.getElementById("aimArea");        //challenge右边框     
			if(i==0){
				challenge.style.display="none"; //切换成游戏界面
				cartSurface.style.display="none";
				end.style.display="none";
				start.style.display="block";
				cdPicmodel.src="";
				f.style.display="block";
				var cdPic=document.getElementById("cdPic");    //清空start界面上的画布
				var ctx=cdPic.getContext("2d");
				ctx.clearRect(0,0,cdPic.width,cdPic.height);
				document.getElementById("sa1").style.display="none";  //清空challenge左边框
				document.getElementById("sa2").style.display="none";
				document.getElementById("sa3").style.display="none";
			}
			else if(i==1){
				var name=document.getElementById("name");
				var f=document.getElementById("f");
				if(name.value=="")
					alert("请输入玩家ID！");
				else if(f.style.display!="none")
					alert("请选择挑战图片！");
				else{
					var flag=0; //判断是否ID被注册，是的话不显示游戏界面
					var j=judgeDif(); //判断玩家选择的游戏难度

					// if(flag==0){   //玩家ID已被使用
						end.style.display="none";
						start.style.display="none";
						challenge.style.display="block";
						var dif=["Easy","Medium","Hard"];
						document.getElementById("Challengename").value="玩家："+name.value+"      难度："+dif[j];  //显示玩家名和难度
						aimArea.style.background="url("+cdPicmodel.src+")";
						aimArea.style.backgroundSize="100% 100%";
						startArea.style.background="url("+cdPicmodel.src+")";
						startArea.style.backgroundSize="100% 100%";						
					// }
				}
			}
			else{
				cartSurface.innerHTML="";
	    		for(var i=0;i<80;i++){   //给end动态界面添加下落组件
					window.setTimeout(cart,Math.random()*15000);
				}
				start.style.display="none";  //切换界面
				challenge.style.display="none";
				end.style.display="block";
				var Et=document.getElementById("Et");  //easy  难度的表
				var Mt=document.getElementById("Mt");  //medium难度的表
				var Ht=document.getElementById("Ht");  //hard  难度的表
				var j=judgeDif();  //判断难度
				var tr=document.createElement("tr");
				var tab;  //显示的表

				//切换显示的第一张排行表
				//比如选择难度easy,则显示第一张表是Easy表
				if(j==0){    
					Et.style.display="inline-block";
					Mt.style.display="none";
					Ht.style.display="none";
					tab="#Et";
				}
				else if(j==1){
					Et.style.display="none";
					Mt.style.display="inline-block";
					Ht.style.display="none";
					tab="#Mt";
				}
				else{
					Et.style.display="none";
					Mt.style.display="none";
					Ht.style.display="inline-block";
					tab="#Ht";
				}

				var node=$(tab+" tr").eq(0).clone(true);
				var name=document.getElementById("name");  //玩家ID
				node.children("td").eq(1).text(name.value);
				var time=document.getElementById("time").value.substring(3);  //玩家所用的时间
				node.children("td").eq(2).text(time);
				var count;  //排名表有几行，用于排名
				var flagrank=0;  //判断玩家是否进前三

				//计算玩家成绩并加以排名
				$(document).ready(function(){
					if($(tab+" tr").length<4)   //只显示前三名  有一个排头，所以加一
						count=$(tab+" tr").length;
					else
						count=4;
					for(var i=1;i<count;i++){
						if(parseInt(time)<parseInt($(tab+" tr").eq(i).children("td").eq(2).text())){
							$(tab+" tr").eq(i).before(node);	
							flagrank=1;
							break;								
						}
						else if(parseInt(time)==parseInt($(tab+" tr").eq(i).children("td").eq(2).text())){
							if(parseInt(time.substring(3))<parseInt($(tab+" tr").eq(i).children("td").eq(2).text().substring(3))){
								$(tab+" tr").eq(i).before(node);			
								flagrank=1;
								break;						
							}
							if(i==count-1){
								$(tab+" tr").eq(i).after(node);	
								break;
							}				
						}
						if(i==count-1){
							$(tab+" tr").eq(i).after(node);	
							break;
						}
					}
					if(count==1){
						node.children("td").eq(0).text($(tab+" tr").length);
						$(tab).append(node);  //添加玩家信息						
					}
					if($(tab+" tr").length==5)
						$(tab+" tr").eq(4).remove();

					for(var i=1;i<4;i++){
						$(tab+" tr").eq(i).children("td").eq(0).text(i);
					}
				});

				//显示玩家成绩并判断是否排在前三
				var gradetime=document.getElementById("gradetime");
				var graderank=document.getElementById("graderank");
				var dynamicPic=document.getElementById("dynamicPic");
				gradetime.innerHTML=time; 
				if(count<4 || flagrank==1){
					graderank.innerHTML="最强王者！进入前三！";
					gradetime.style.textShadow="5px 7px 10px green";
					dynamicPic.src="../img/paishou.gif";
					cartSurface.style.display="block";
				}
				else{
					graderank.innerHTML="弱小菜鸡！未入前三！";
					gradetime.style.textShadow="5px 7px 10px red";
					dynamicPic.src="../img/bishi.gif";
				}
				stopClock();  //重置并暂停计时器
			}
		}
	</script>
	<style type=text/css>
		#grade{
			width:300px;
			height:300px;
			border:none;
			float:right;
			margin-top:2%;
			text-align:center;
		}
		#gradetime{
			width:200px;
			height:200px;
			border-radius:50%;
			border:none;
			color:lime;
			background:skyblue;
			text-shadow:3px 4px 5px green;
			font-size:45px;
			text-align:center;
			font-weight:bold;
			line-height:200px;
			margin:0 auto;
		}
		#graderank{
			margin-top:-20%;
			border:none;
			font-size:27px;
			text-align:center;
			color:orange;
			-webkit-transform:rotate(-20deg);
		}
	</style>
</head>

<body bgColor="lightblue">

	<div id="start">        <!-- 游戏启动界面 -->
		<p class=lab>游戏拼图</p>

		<div style="text-align:center">
			<label for="name" class=font2>Name:</label>  <!-- 输入玩家名字 -->
					
			<input type=text value=<%=request.getParameter("user")%>  name="name" style="font-size:25px" id="name">
		</div>
		<br/>

		<div style="text-align:center" class=font2>
			Difficulty Level：<!-- 选择游戏难度 -->
			<input type=radio name="difficulty" style="width:20px;height:20px" checked > Easy
			<input type=radio name="difficulty" style="width:20px;height:20px"> Medium
			<input type=radio name="difficulty" style="width:20px;height:20px"> Hard
		</div>
		<br/>

		<div id="choosePic" style="overflow:hidden"> <!-- Image Area -->
			<p align=center style="line-height:5px;" class="font1">
				Image Area
			</p>

			<canvas id="cdPic" ondrop="drop(event)" ondragover="allowDrop(event)" style="opacity:0.6"> <!-- 选中的图片文件框 -->
				<image src="" width="100%" height="100%" id="cdPicmodel" style="display:none">
			</canvas>
			<h2 align=center style="color:grey;float:left;margin-left:-200px;margin-top:100px;z-index:10" id="f">选择右侧图片<br/>拖入框内</h2>

			<div id="pics"> <!-- 游戏图片选择 -->
			</div>

		</div>
		<br/>

		<div style="text-align:center">
			<input type=button value="GO!" onclick="show(1)">
		</div>
	</div>


	<div id="challenge">    <!-- 挑战界面 -->
		<div id="container"> <!-- 页面布局 -->
			<div style="width:100%;height:10%;margin-top:20px">
				<input type=text value="玩家： "     id="Challengename" class="Challengename font1" disabled>
				<input type=text value="时间：00:00" id="time"          class="font1 time"          disabled>
			</div>

			<div style="width:80%;height:85%;float:left;">
				<div id="aimArea">
				</div>

				<div id="startArea">
					<div id="sa1">
						<div id="sa1img0" class="picstylesa1"  ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa1img1" class="picstylesa1"  ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa1img2" class="picstylesa1"  ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa1img3" class="picstylesa1"  ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
					</div>
					<div id="sa2">
						<div id="sa2img0" class="picstylesa2" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa2img1" class="picstylesa2" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa2img2" class="picstylesa2" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa2img3" class="picstylesa2" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa2img4" class="picstylesa2" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa2img5" class="picstylesa2" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
					</div>
					<div id="sa3">
						<div id="sa3img0" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img1" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img2" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img3" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img4" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img5" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img6" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img7" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
						<div id="sa3img8" class="picstylesa3" ondragstart="drag(event)" ondrop="drop1(event)" draggable="true"></div>
					</div>
				</div>
			</div>

			<div style="width:20%;height:85%;float:right;margin-top:6%;line-height:70px">
				<p><input type=button value="游戏开始"  onclick="startClock()" id="startbut"></p>
				<p><input type=button value="暂停"      onclick="PandSClock()" id="PandSbut" disabled style="background:grey"></p>
				<p><input type=button value="重新启动"  onclick="stopClock()" id="againSbut"></p>
			</div>
		</div>
	</div>

	<div id="cartSurface">  <!-- end动态效果 -->
	</div>

	<div id="end">          <!-- 结果展示界面 -->

		<p class="pass" id="pass">祝贺您解决难题！</p>
		<div id="container">
			<image id="dynamicPic" src="image/paishou.gif" width=200px 
					style="float:left;position:absolute;margin-left:-3%;user-select:none">
			<table id="Et" name="Et" class="chart" border=1 cellspacing="5" cellpadding="5"><!-- 简单难度的表 -->
				<caption>Easy</caption>
				<tr>
					<td>排名</td>
					<td>玩家</td>
					<td>成绩</td>
				</tr>
			</table>
			<table id="Mt" name="Mt" class="chart" border=1 cellspacing="5" cellpadding="5"><!-- 简单难度的表 -->
				<caption>Medium</caption>
				<tr>
					<td>排名</td>
					<td>玩家</td>
					<td>成绩</td>
				</tr>
			</table>
			<table id="Ht" name="Ht" class="chart" border=1 cellspacing="5" cellpadding="5"><!-- 简单难度的表 -->
				<caption>Hard</caption>
				<tr>
					<td>排名</td>
					<td>玩家</td>
					<td>成绩</td>
				</tr>
			</table>
			<div id="grade">
				<div id="gradetime">
				</div>
				<div id="graderank">
				</div>
			</div>
			<ul id="chart" class=font>
				<li onclick="showChart('Et')">Easy</li>
				<li onclick="showChart('Mt')">Medium</li>
				<li onclick="showChart('Ht')">Hard</li>
			</ul>
			<input type=button id="restart" class="restart font" value="Restart" onclick="show(0)"/>
		</div>
	</div>

</body>
</html>



